<template>
    <view class="container paddingBottomBar" v-if="data" :style="themeColor">
        <view class="banner">
            <view class="swiper">
                <image class="image" :src="easyGetImgUrl(data.Images)" mode="aspectFill"></image>
            </view>
        </view>
        <view class="info-item price-item">
            <view class="price">
                <view class="price-box">
                    <text class="price-text small">¥</text>
                    <text class="price-text">{{ data.ProductPrice }}</text>
                </view>
            </view>
            <view class="collect" @click="favoriteFn" v-if="false">
                <uni-icons
                    :type="data.IsFavorite == 1 ? 'heart-filled' : 'heart-filled'"
                    size="46"
                    :customIcons="data.IsFavorite == 1 ? 'icon-red' : 'icon-gray-3'">
                </uni-icons>
            </view>
        </view>
        <view class="info-item">
            <view class="product-name">
                <text class="product-name-text">{{ data.Name }}</text>
            </view>
            <button class="btn-share" open-type="share">
                <uni-icons type="redo-filled" customIcons="icon-gray-4"></uni-icons>
                <text>分享</text>
            </button>
        </view>

        <view class="give-item">
            <view class="give-desc">
                <text class="give-tag">促销</text>
                <text class="give-text"
                    >购满指定商品满<text class="big">{{ data.AddupRecord }}</text
                    >元，即可全部返还金额</text
                >
            </view>

            <image class="give-bg" src="/static/img/img_give@2x.png"></image>
        </view>

        <view class="info-item content-item">
            <text class="content-item-title">商品规格</text>
            <view class="pro-box">
                <view class="pro-list">
                    <radio-group @change="change">
                        <view class="pro-list-item" v-for="(item, index) in getProDatas(showMore)" :key="index">
                            <image class="pro-image" :src="easyGetImgUrl(item.SkuImg)"></image>
                            <view class="pro-info">
                                <text class="pro-info-name">{{ item.ProductName }}</text>
                                <text class="pro-info-desc" v-if="item.AttributeNameValue">{{
                                    item.AttributeNameValue
                                }}</text>
                                <view class="pro-info-price">
                                    <text class="price-text"></text>
                                    <radio :checked="item.ID == useSku.ID" :value="String(item.ID)"></radio>
                                    <button class="btn btn-main" @click="join(item)" v-if="false">立即参加</button>
                                </view>
                            </view>
                        </view>
                    </radio-group>
                </view>
            </view>
        </view>
        <view class="more touch" v-if="proDatas.length > 3" @click="showMore = !showMore">
            <text class="more-text">{{ showMore ? "收起" : "展开全部" }}</text>
            <uni-icons class="more-icon" size="26" :type="showMore ? 'arrowup' : 'arrowdown'"></uni-icons>
        </view>
        <view class="info-item content-item">
            <text class="content-item-title">活动规则</text>
            <rich-text :nodes="formatRichTextFn(data.Description ? data.Description : role)"> </rich-text>
        </view>
        <view class="info-item content-item" v-if="false">
            <text class="content-item-title">活动详情</text>
            <rich-text :nodes="formatRichTextFn(data.Description ? data.Description : role)"> </rich-text>
        </view>
        <view class="bottom-bar">
            <button class="btn btn-success btn-fill" @click="join">立即参加</button>
        </view>
    </view>
</template>

<script>
import { formatRichText } from "@/uni-sub-base/utils/elementUtil.js"
import { GetAddupActivityProductInfo, CreateAddupActivityAction } from "@/service/api/activity.js"
export default {
    components: {},
    data() {
        return {
            data: null,
            role: '<span style="font-size:12px">暂无规则</span>',
            description: '<span style="font-size:12px">暂无规则</span>',
            id: 0,
            showMore: false,
            proDatas: [],
            proData: {},
            useSku: null,
        }
    },
    onLoad(e) {
        if (e) {
            this.id = e.id
            this.data = JSON.parse(decodeURIComponent(e.item))
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        getPrice() {
            let min = this.data.SaleMinPrice
            let max = this.data.SaleMaxPrice
            if (min != max) {
                return `${min}~${max}`
            }
            if (min == max) {
                return `${max}`
            }
        },
        getInfo() {
            let param = {
                id: this.id,
            }
            GetAddupActivityProductInfo(param).then((res) => {
                if (res.State == 1) {
                    this.proData = res.Data
                    this.proDatas = res.Data.ProductSkuList
                    this.proDatas.forEach((e) => {
                        e.ProductName = this.proData.ProductName
                        ;(e.activityId = this.id), (e.activityPrice = this.data.ProductPrice)
                    })
                    this.useSku = this.proDatas[0]
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        formatRichTextFn(text) {
            return formatRichText(text)
        },
        getProDatas(showMore) {
            if (showMore) {
                return this.proDatas
            }
            return this.proDatas.slice(0, 3)
        },
        join() {
            this.easyGoTo(
                "/pages_shop/packet/accumulate/submit?proData=" + encodeURIComponent(JSON.stringify(this.useSku)),
            )
        },
        joinFn() {
            let param = {
                id: this.id,
            }
            CreateAddupActivityAction(param).then((res) => {})
        },
        change(e) {
            let skuId = e.detail.value
            this.useSku = this.proDatas.find((e) => {
                return e.ID == skuId
            })
        },
    },
}
</script>

<style lang="scss">
.container {
}
.banner {
    position: relative;
    .swiper {
        height: 640rpx;
        .image {
            width: 100%;
            height: 100%;
        }
    }
}

.info-item {
    padding: $app-page-padding;
    background: $color-white;
    display: flex;
    flex-direction: row;
    align-items: center;

    .label {
        flex: 1;

        .label-text {
            margin-right: 40rpx;
            color: $app-color-text-tip;
        }

        .value-text {
            font-size: $font-size-28;
        }
    }
}
.price-item {
    padding-bottom: 0;

    .price {
        flex: 1;

        .price-box {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            font-weight: bold;
            .small {
                font-size: $font-size-28;
                margin-bottom: 8rpx;
            }
            .del-text {
                margin-bottom: 8rpx;
                margin-left: 10rpx;
            }
        }

        .original-price-text {
            display: flex;
            align-items: center;

            text {
                font-size: $font-size-20;
                color: $app-color-text-tip;
            }
        }

        .price-text {
            font-size: $font-size-52;
            color: $color-orange-1;
        }
    }
}
.desc-item {
    align-items: flex-start;
    .product-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 30rpx;
    }
}
.btn-share {
    background: $color-gray-5;
    padding: 0;
    width: 120rpx;
    height: 56rpx;
    border: none;
    border-top-left-radius: 30rpx;
    border-bottom-left-radius: 30rpx;
    border-top-right-radius: 0rpx;
    border-bottom-right-radius: 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-right: -$app-item-padding;

    &::after {
        border: 0;
    }

    text {
        margin-top: 4rpx;
        margin-left: 10rpx;
        color: $app-color-text-tip;
    }
}

.product-name-text {
    font-weight: 700;
    margin-bottom: 20rpx;
    font-size: $font-size-30;
    word-break: break-all;
    white-space: pre-wrap;
}
.content-item {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20rpx;
    .content-item-title {
        font-weight: 700;
        margin-bottom: 16rpx;
        font-size: $font-size-28;
    }
}

.give-item {
    display: flex;
    height: 80rpx;
    position: relative;
    padding: 0 $app-page-padding $app-page-padding;
    background: $color-white;
    align-items: center;
    .give-desc {
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 1;
        .give-tag {
            width: 66rpx;
            height: 70rpx;
            border-radius: 40rpx 100rpx 100rpx 40rpx;
            background: #f62d20;
            font-weight: 700;
            margin-right: 16rpx;
            margin-left: 2rpx;
            color: $color-white;
            font-size: $font-size-26;
            display: flex;
            align-items: center;

            padding-left: 8rpx;
        }
        .give-text {
            color: $color-white;
            position: relative;

            font-size: $font-size-26;
            margin-bottom: 8rpx;
        }
    }

    .big {
        color: $color-white;
        font-size: $font-size-32;
    }
    .give-bg {
        position: absolute;
        left: $app-page-padding;
        top: 0;
        z-index: 0;
        height: 80rpx;
        width: calc(100% - 48rpx);
        background: linear-gradient(90deg, #ff8470 0%, #f62d20 100%);
        border-radius: 16rpx;
    }
}

.bottom-bar {
    .btn {
        margin-left: 0;
        border-radius: 100rpx;
    }
}
.more {
    height: 66rpx;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    border-top: solid 1rpx $border;
    background: $color-white;
    justify-content: center;
    .more-text {
        margin-right: 10rpx;
    }
    .more-icon {
        margin-top: 4rpx;
    }
}
.pro-box {
    width: 100%;
}
.pro-list-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding 0;
    &:first-child {
        padding-top: 0;
    }
    &:last-child {
        padding-bottom: 0;
    }
    .pro-image {
        width: 144rpx;
        height: 144rpx;
        border-radius: 8rpx;
        margin-right: $app-page-padding;
    }
    .pro-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        .pro-info-name {
            font-size: $font-size-28;
            font-weight: 700;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .pro-info-price {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            text {
                color: $color-orange-1;
                margin-bottom: 8rpx;
            }
            .small {
                font-size: $font-size-20;
                margin-bottom: 10rpx;
            }
            .price-text {
                display: flex;
                font-size: $font-size-36;
                flex: 1;
            }
            .btn {
                border-radius: 100rpx;
            }
        }
    }
}
</style>
